<script>
export default {
  name:"Announcement",
  data() {
    return {
      announcement: "这是实时公告内容，正在滚动中..."
    };
  }
}
</script>
<template>
  <div class="marquee">
    <div class="content">
      <span class="iconfont icon-xiaolaba"></span>
      {{ this.$parent.announceList[0]?.content || '暂无公告' }}
    </div>
  </div>
</template>

<style scoped>
.marquee {
  width: 300px; /* 调整宽度 */
  overflow: hidden;
  font-size: 13px; /* 调整字体大小 */
  white-space: nowrap;
  border-radius: 15px;
}

.content {
  color: #2CC2EF;
  font-size: 17px;
  display: inline-block;
  animation: marquee 10s linear infinite;
}

@keyframes marquee {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}
</style>
